<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件绑定</title>
    <style>
        .a {
            color: red;
        }

        .b {
            font-size: 50px;
        }
    </style>
</head>
<body>


<div id="app">
    hello javascript
</div>

<!--onclick="addCss()"   前绑定事件-->
<button id="btn">单击添加样式</button>

<script type="text/javascript">

    // 函数调用
    // addCss()

    //  事件的绑定   1. 获取事件源   2. 编写事件回调函数    3. 建立事件源和回调函数之间的关系
    // let btn = document.getElementById("btn");
    //
    // function addCss(){
    //     let div = document.getElementById("app");
    //     div.className = 'a b'
    // }
    //
    // btn.onclick = addCss

    // document.getElementById("btn").onclick = function () {
    //     let div = document.getElementById("app");
    //     div.className = 'a'
    //     console.log('a')
    // }
    //
    // document.getElementById("btn").onclick = function () {
    //     let div = document.getElementById("app");
    //     div.className = 'b'
    //     console.log('b')
    // }

    // 事件监听

    document.getElementById("btn").addEventListener('dblclick',function () {
        let div = document.getElementById("app");
        // div.className = 'a'
        div.classList.add('a')
        console.log('a')
    })

    document.getElementById("btn").addEventListener('dblclick',function () {
        let div = document.getElementById("app");
        // div.className = 'b'
        div.classList.add('b')
        console.log('b')
    })



</script>

</body>
</html>
